<template>
  <div class="wrapper">
    <header class="header header-fixed">
      <el-menu mode="horizontal" theme="dark" :default-active="module">
        <el-menu-item index="logo" class="logo">
          <router-link to="/">管理后台</router-link>
        </el-menu-item>
        <el-menu-item index="item">
          <router-link to="/item/usj/list">产品管理</router-link>
        </el-menu-item>
        <el-menu-item index="order">
          <router-link to="/order/list">订单管理</router-link>
        </el-menu-item>
        <el-menu-item index="dtb">
          <router-link to="/dtb/list">分销管理</router-link>
        </el-menu-item>
        <el-menu-item index="system">
          <router-link to="/credit-card/list">系统管理</router-link>
        </el-menu-item>
      </el-menu>
      <div index="profile" class="profile">
        <el-dropdown trigger="hover" @command="handleProfileDropdownEvent">
          <span class="el-dropdown-link">
            <img class="avatar" src="/static/img/avatar3.png" />
            <!--<i class="el-icon-caret-bottom"></i>-->
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item disabled>您好, {{profile && profile.name}}</el-dropdown-item>
            <el-dropdown-item divided command="updatePwd">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </header>

    <!-- 左侧导航 -->
    <div class="menu">
      <el-menu theme="dark" :default-active="menu" :router="true">
        <el-menu-item v-show="module==='item'" index="/item/list">产品列表</el-menu-item>
        <el-menu-item v-show="module==='item'" index="/item/usj/list">大阪环球快速票</el-menu-item>
        <el-menu-item v-show="module==='order'" index="/order/list">订单列表</el-menu-item>
        <el-menu-item v-show="module==='order'" index="/refund/list">订单退款</el-menu-item>
        <el-menu-item v-show="module==='order'" index="/purchase/order/list">预订单列表</el-menu-item>
        <el-menu-item v-show="module==='dtb'" index="/dtb/list">分销商列表</el-menu-item>
        <el-menu-item v-show="module==='dtb'" index="/dtb/recharge/list">充值申请</el-menu-item>
        <el-menu-item v-show="module==='dtb'" index="/dtb/stat/list">分销报表</el-menu-item>
        <el-menu-item v-show="module==='system'" index="/credit-card/list">信用卡管理</el-menu-item>
        <el-menu-item v-show="module==='system'" index="/exchange-rate/list">汇率管理</el-menu-item>
      </el-menu>
    </div>

    <!-- 右侧主内容区 -->
    <div class="container">
      <!-- -->
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item v-for="bc in breadcrums" :key="bc.label" :to="bc.to">{{bc.label}}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import * as types from '@/store/mutation-types'

export default {
  data() {
    return {
      defaultModule: 'item',
      defaultPath: '/item/usj/list'
    }
  },
  computed: {
    ...mapState({
      profile: state => state.user.profile
    }),
    module() {
      if ((this.$route.meta && this.$route.meta.module)) {
        return this.$route.meta.module
      } else {
        // detect module from path
        const path = this.$route.path
        if (path.length > 1) {
          const splitted = path.split('/')
          if (splitted.length > 1) {
            return splitted[1]
          }
        }
      }
      return this.defaultModule
    },
    menu() {
      if (this.$route.meta && this.$route.meta.menu) {
        return this.$route.meta.menu
      }
      return this.$route.path === '/' ? this.defaultPath : this.$route.path
    },
    breadcrums() {
      if (this.$route.meta && this.$route.meta.breadcrums) {
        return this.$route.meta.breadcrums
      }
      return [{ label: '管理后台' }]
    }
  },
  methods: {
    handleProfileDropdownEvent(cmd) {
      if (cmd === 'logout') {
        this.$store.dispatch(types.LOGOUT).then(() => {
          // redirect to login page
          this.$router.push({ path: '/login', query: { success: this.$route.fullPath } })
        })
      } else if (cmd === 'updatePwd') {
        this.$router.push('/member/password/update')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dropdown-menu {
  width: 150px;
  margin: 0 0;
  .el-dropdown-menu__item {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 15px;
    line-height: 30px;
    &.is-disabled {
      cursor: default;
      color: #1F2D3D;
      pointer-events: none;
    }
  }
}
</style>
